<template>
  <div class="UserWork_container">
    <div class="UserWork_box">
      <el-form :model="UserInformation" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名">
          <el-input :disabled="true" v-model="UserInformation.userWorkInfo.username"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="UserInformation.userWorkInfo.real_name" placeholder="请输入真实姓名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="UserInformation.userWorkInfo.sex" placeholder="请选择性别">
            <el-option v-for="(item, key) in sex" :key="key" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="UserInformation.userWorkInfo.age" placeholder="请输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="籍贯地址">
          <el-input v-model="UserInformation.userWorkInfo.address" placeholder="请填写详细籍贯地址"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="UserInformation.userWorkInfo.identity_number" placeholder="请填写身份证号码"></el-input>
        </el-form-item>
        <el-form-item label="工作状态">
          <el-select v-model="UserInformation.userWorkInfo.work_condition" placeholder="请选择就业状态">
            <el-option v-for="item in condotion" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" style="margin-bottom:20px" @click="addUserWork">新增工作经历</el-button>
        <div v-for="(work, index) in UserInformation.userWorks" :key="index">
          <div style="display:flex">
            <el-form-item label="工作开始时间" style="margin-right: 80px">
              <el-date-picker
                v-model="work.start_date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="工作结束时间">
              <el-date-picker
                v-model="work.end_date"
                type="date"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-button style="height: 41px; margin-left: 30px" icon="el-icon-delete" circle @click="deleteUserWork(index)"></el-button>
          </div>
          <el-form-item label="工作地址">
            <el-input v-model="work.work_place" placeholder="请输入工作地址"></el-input>
          </el-form-item>
          <div style="display: flex">
            <el-form-item label="工作类型" style="margin-right: 95px">
              <el-cascader
                v-model="W_kind[index].kind"
                :options="Work_kind"
                @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="月工资">
              <el-input v-model="work.salary" placeholder="请输入平均工资"></el-input>
            </el-form-item>
          </div>
          <el-form-item label="备注">
            <el-input v-model="work.remarks" type="textarea" placeholder="请输入工作相关备注"></el-input>
          </el-form-item>
        </div>
        <el-form-item class="btns">
          <el-button type="primary" @click="CompleteInfo">提交</el-button>
          <el-button type="info" @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      W_kind: [{
        kind: []
      }],
      UserInformation: {
        userWorkInfo: {
          id: window.sessionStorage.getItem('uid'),
          username: window.sessionStorage.getItem('username'),
          real_name: '',
          sex: '',
          age: '',
          address: '',
          identity_number: '',
          work_condition: ''
        },
        userWorks: [{
          id: 1,
          uid: window.sessionStorage.getItem('uid'),
          work_place: '',
          work_kind: '',
          start_date: '',
          end_date: '',
          salary: '',
          remarks: ''
        }]
      },
      sex: [
        { value: '男', label: '男' },
        { value: '女', label: '女' }
      ],
      Work_kind: [
        {
          value: '互联网/IT/电子/通信',
          label: '互联网/IT/电子/通信',
          children: [
            { value: '不限', label: '不限' },
            { value: '电子/半导体/集成电路', label: '电子/半导体/集成电路' },
            { value: '电子商务', label: '电子商务' },
            { value: '互联网', label: '互联网' },
            { value: 'IT服务', label: 'IT服务' },
            { value: '计算机软件/硬件', label: '计算机软件/硬件' },
            { value: '人工智能', label: '人工智能' },
            { value: '游戏', label: '游戏' },
            { value: '运营商/增值服务', label: '运营商/增值服务' }
          ]
        },
        {
          value: '房地产',
          label: '房地产',
          children: [
            { value: '不限', label: '不限' },
            { value: '房地产开发与经营', label: '房地产开发与经营' },
            { value: '房地产中介', label: '房地产中介' },
            { value: '土地与公共设施管理', label: '土地与公共设施管理' },
            { value: '物业服务', label: '物业服务' }
          ]
        },
        {
          value: '金融业',
          label: '金融业',
          children: [
            { value: '不限', label: '不限' },
            { value: '保险', label: '保险' },
            { value: '典当', label: '典当' },
            { value: '小额贷款', label: '小额贷款' },
            { value: '基金/风投', label: '基金/风头' },
            { value: '汽车金融服务', label: '汽车金融服务' },
            { value: '信托投资', label: '信托投资' },
            { value: '银行', label: '银行' },
            { value: '证券/期货', label: '证券/期货' }
          ]
        },
        {
          value: '建筑业',
          label: '建筑业',
          children: [
            { value: '不限', label: '不限' },
            { value: '房屋建筑', label: '房屋建筑' },
            { value: '公共建筑装饰装修', label: '公共建筑装饰装修' },
            { value: '土木工程建筑', label: '土木工程建筑' },
            { value: '住宅装饰装修', label: '住宅装饰装修' }
          ]
        },
        {
          value: '制造业',
          label: '制造业',
          children: [
            { value: '不限', label: '不限' },
            { value: '船舶/航空/航天/火车制造', label: '船舶/航空/航天/火车制造' },
            { value: '电气机械/器材制造', label: '电气机械/器材制造' },
            { value: '电子设备制造', label: '电子设备制造' },
            { value: '纺织业/服饰产品加工制造', label: '纺织业/服饰产品加工制造' },
            { value: '钢铁和有色金属冶炼及加工', label: '钢铁和有色金属冶炼及加工' },
            { value: '化学纤维制造业', label: '化学纤维制造业' },
            { value: '日化产品制造', label: '日化产品制造' },
            { value: '医药制造', label: '医药制造' }
          ]
        },
        {
          value: '农林牧渔',
          label: '农林牧渔',
          children: [
            { value: '不限', label: '不限' }
          ]
        },
        {
          value: '批发/零售/贸易',
          label: '批发/零售/贸易',
          children: [
            { value: '不限', label: '不限' },
            { value: '快速消费品', label: '快速消费品' },
            { value: '贸易/进出口代理/拍卖', label: '贸易/进出口代理/拍卖' },
            { value: '耐用消费品', label: '耐用消费品' },
            { value: '零售/批发', label: '零售/批发' }
          ]
        },
        {
          value: '专业服务',
          label: '专业服务',
          children: [
            { value: '不限', label: '不限' },
            { value: '财务/审计/税务', label: '财务/审计/税务' },
            { value: '法律服务', label: '法律服务' },
            { value: '工程技术与设计服务', label: '工程技术与设计服务' },
            { value: '广告业', label: '广告业' },
            { value: '会议/展览服务', label: '会议/展览服务' },
            { value: '检测/认证', label: '检测/认证' },
            { value: '商业代理服务', label: '商业代理服务' },
            { value: '咨询服务', label: '咨询服务' }
          ]
        },
        {
          value: '文化/体育/娱乐',
          label: '文化/体育/娱乐',
          children: [
            { value: '不限', label: '不限' },
            { value: '广播/电视/电影/录音制作', label: '广播/电视/电影/录音制作' },
            { value: '体育', label: '体育' },
            { value: '文化艺术/娱乐', label: '文化艺术/娱乐' },
            { value: '新闻/出版', label: '新闻/出版' }
          ]
        },
        {
          value: '交通运输/仓储/物流',
          label: '交通运输/仓储/物流',
          children: [
            { value: '不限', label: '不限' },
            { value: '火车站/港口/汽车站/路政', label: '火车站/港口/汽车站/路政' },
            { value: '货运/物流仓储', label: '货运/物流仓储' },
            { value: '民航/铁路/公路/水路客运', label: '民航/铁路/公路/水路客运' },
            { value: '邮政/快递', label: '邮政/快递' }
          ]
        },
        {
          value: '能源/环保/矿产',
          label: '能源/环保/矿产',
          children: [
            { value: '不限', label: '不限' },
            { value: '电力/水利/热力/燃气', label: '电力/水利/热力/燃气' },
            { value: '环保', label: '环保' },
            { value: '矿产/采掘', label: '矿产/采掘' },
            { value: '石油/石化', label: '石油/石化' }
          ]
        },
        {
          value: '教育培训/科研',
          label: '教育培训/科研',
          children: [
            { value: '不限', label: '不限' },
            { value: '科学技术推广服务业', label: '科学技术推广服务业' },
            { value: '培训/课外教育/教育辅助', label: '培训/课外教育/教育辅助' },
            { value: '学术/科研', label: '学术/科研' },
            { value: '学校教育', label: '学校教育' }
          ]
        },
        {
          value: '卫生及社会工作',
          label: '卫生及社会工作',
          children: [
            { value: '不限', label: '不限' },
            { value: '卫生服务', label: '卫生服务' },
            { value: '养老/孤儿/看护等社会服务', label: '养老/孤儿/看护等社会服务' },
            { value: '医院', label: '医院' }
          ]
        },
        {
          value: '公共管理/社会保障',
          label: '公共管理/社会保障',
          children: [
            { value: '不限', label: '不限' },
            { value: '国家机构', label: '国家机构' },
            { value: '社团/组织/社会保障', label: '社团/组织/社会保障' }
          ]
        },
        {
          value: '生活服务',
          label: '生活服务',
          children: [
            { value: '不限', label: '不限' },
            { value: '餐饮业', label: '餐饮业' },
            { value: '酒店/民宿', label: '酒店/民宿' },
            { value: '居民服务', label: '居民服务' },
            { value: '旅游业', label: '旅游业' }
          ]
        },
        { value: '不限', label: '不限' }
      ],
      condotion: [
        { value: 0, label: '就业' },
        { value: 1, label: '创业' },
        { value: 2, label: '无业' }
      ]
    }
  },
  components: {
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    deleteUserWork (index) {
      if (index !== -1) {
        this.UserInformation.userWorks.splice(index, 1)
        // this.$delete(this.agents, index)
      }
    },
    addUserWork () {
      this.W_kind.push({
        kind: []
      })
      this.UserInformation.userWorks.push({
        id: 1,
        uid: window.sessionStorage.getItem('uid'),
        work_place: '',
        work_kind: '',
        start_date: '',
        end_date: '',
        salary: '',
        remarks: ''
      })
    },
    CompleteInfo () {
      var i = 0
      for (var item of this.W_kind) {
        this.UserInformation.userWorks[i].work_kind = item.kind[0] + item.kind[1]
        i = i + 1
      }
      var token = sessionStorage.getItem('token')
      this.$axios.defaults.headers.Authorization = 'Bearer ' + token
      this.$axios.post('/userWorkInfo/addUserWork', this.UserInformation).then(response => {
        if (response.data.code === '201') this.$message.error('该用户信息已存在,请勿重复添加')
        else if (response.data.code === '202') this.$message.success('保存失败!')
        else if (response.data.code === '200') this.$message.success('添加成功!')
      })
    },
    handleChange (value) {
    }
  },
  mounted () {
  }
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}
</style>

<style lang="less" scoped>
.UserWork_box{
    width: 800px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 20px;
    transform: translate(-50%,-50%);
}
.btns{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    margin-bottom: 40px;
}
.demo-ruleForm{
    position: absolute;
    width: 100%;
    top: 20px;
    padding: 0 20px;
    box-sizing: border-box;
}
.avatar-uploader{
  height: 120px;
}
</style>
